<template>
  <view id="contianer">
    <view>
      <view class="title">手机号码</view>
      <view style="display: flex; width: 100%;" class="input">
        <input placeholder="请输入当前手机号" placeholder-style="font-size:26rpx;color:#ACACAC;" type="number" name="input"
          v-model="form.phone" />
      </view>
    </view>
    <view>
      <view class="title">验证码</view>
      <view style="display: flex;justify-content: space-between; width: 100%;" class="input">
        <input placeholder="请输入验证码" placeholder-style="font-size:26rpx;color:#ACACAC;" type="number" name="input"
          v-model="form.code" />
        <view @click="getPhoneCode" style="font-size: 28rpx;color: #32B499;">
          {{ countDown ? `${countDown}s后重发` : '获取验证码' }}
        </view>
      </view>
    </view>
    <view>
      <view class="title">新的密码</view>
      <view class="input">
        <input placeholder="请输入新的密码" placeholder-style="font-size:26rpx;color:#ACACAC;" type="password" name="input"
          v-model="form.password" />
      </view>
    </view>
    <view>
      <view class="title">确认密码</view>
      <view class="input">
        <input placeholder="请确认新的密码" placeholder-style="font-size:26rpx;color:#ACACAC;" type="password" name="input"
          v-model="form.confirmPassword" />
      </view>
    </view>
    <view style="margin-top: 60rpx;">
      <button class="button" @click="submit">确认修改</button>
      <button class="buttons" @click="$goPath(1)">返回登录</button>
    </view>
  </view>
</template>
<script>
import { Base64 } from '@/common/base.js'

export default {
  data() {
    return {
      form: {
        phone: '',
        code: '',
        password: '',
        confirmPassword: '',
      },
      countDown: '', // 设置倒计时初始值
    }
  },
  methods: {
    //发送验证码
    getPhoneCode() {
      let regex = /^((\+)?86|((\+)?86)?)0?1[3456789]\d{9}$/;
      if (this.countDown) return;
      if (!regex.test(this.form.phone)) return this.$toast('请输入正确的手机号')
      this.$request.getCode({ phone: this.form.phone, type: 2 }).then(res => {
        if (res.code == 200 && res.isSuccess) {
          this.$toast('验证码发送成功')
          this.startCountdown();
        } else {
          this.$toast(res.msg)
        };
      }).catch(err => {
        this.$toast('验证码发送失败')
      });
    },
    //倒计时
    startCountdown() {
      this.countDown = 60;
      const that = this;
      const timer = setInterval(() => {
        if (that.countDown > 0) {
          that.countDown--;  // 每秒减1
        } else {
          clearInterval(timer);  // 倒计时结束，清除定时器
          that.countDown = '';
        }
      }, 1000);
    },
    submit() {
      let { phone, code, password } = this.form
      let base = new Base64
      const param = {
        phone,
        code,
        password: base.encode(password),
      }
      let regex = /^((\+)?86|((\+)?86)?)0?1[3456789]\d{9}$/;
      let passReg = /^(?=.*[a-zA-Z])(?=.*[0-9])[A-Za-z0-9]{8,18}$/
      if (!regex.test(this.form.phone)) return this.$toast('请输入正确的手机号')
      if (!this.form.code) return this.$toast('请输入验证码')
      if (!passReg.test(this.form.password)) return this.$toast('密码格式为8-18位，大写，小写，数字')
      if (this.form.password != this.form.confirmPassword) return this.$toast('两次输入的密码不一致')
      uni.showLoading({
        title: '修改中...'
      });
      this.$request.editPass(param).then(res => {
        if (res.code == 200 && res.isSuccess) {
          this.$toast('修改成功!')
          this.form = {}
          uni.hideLoading();
        } else {
          this.$toast(res.msg)
          uni.hideLoading();

        }
      })
    },

  }
}
</script>

<style scoped>
page {
  height: 100%
}

#contianer {
  padding-top: 1rpx;
  position: relative;
  height: 100%;
  /* 本页面背景颜色 */
  background-color: #F5F5F5;
}

.title {
  color: #696969;
  margin: 15rpx 20rpx;
}

.input {
  padding: 20rpx 20rpx;
  background-color: #fff;
}

.button {
  width: 80%;
  height: 80rpx;
  border-radius: 44rpx;
  margin-bottom: 24rpx;
  background-color: #32B499;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 28rpx;
}

.buttons {
  width: 80%;
  height: 80rpx;
  border-radius: 44rpx;
  margin-bottom: 24rpx;
  /* background-color: #32B499; */
  border: 1rpx solid #32B499;
  color: #32B499;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 28rpx;
}
</style>
